﻿@page "/chart/line-zone"

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor
@using ThemeHelper

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample visualizes the annual mean rainfall in Australia with multi-colored line series in the chart. Data points are enhanced with segments and tooltip.</p>
</SampleDescription>
<ActionDescription>
    <p> In this example, you can see how to render and configure the points in a particular range by using <code>MultiColoredLine</code> series type. Points under the range can be customized with <code>Color</code>, <code>Width</code>, and <code>DashArray</code> options as well.</p>
    <p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Annual Mean Rainfall for Australia" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="yyyy" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value}mm" RangePadding="ChartRangePadding.None" Minimum="200" Maximum="800" Interval="100">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartAnnotations>
            <ChartAnnotation Region="Regions.Series" X="@XValue" Y="2%">
                <ContentTemplate>
                    <div style="width:80px; padding: 5px;">
                        <table style="width: 100%">
                            <tr>
                                <td>
                                    <div style='width: 10px; height: 10px; background:blue;border-radius: 15px;'></div>
                                </td>
                                <td style="padding-left: 5px;">
                                    High
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div style='width: 10px; height: 10px; background:green;border-radius: 15px;'></div>
                                </td>
                                <td style="padding-left: 5px;">
                                    Medium
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div style='width: 10px; height: 10px; background:red;border-radius: 15px;'></div>
                                </td>
                                <td style="padding-left: 5px;">
                                    Low
                                </td>
                            </tr>
                        </table>
                    </div>
                </ContentTemplate>
            </ChartAnnotation>
        </ChartAnnotations>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="Australia" XName="Period" Width="2"
                         SegmentAxis="Segment.Y" YName="RainfallInfo" Type="ChartSeriesType.MultiColoredLine">
                <ChartSegments>
                    <ChartSegment Value="450" Color="red">
                    </ChartSegment>
                    <ChartSegment Value="500" Color="green"></ChartSegment>
                    <ChartSegment Color="blue"></ChartSegment>
                </ChartSegments>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Random randomNum = new Random();
    private int[] annualMean = { 380, 410, 310, 540, 510, 330, 490, 470, 472, 460, 550, 420, 380, 430, 385, 520, 580, 420, 350, 505,
        535, 410, 204, 400, 415, 408, 415, 350, 375, 500, 390, 450, 440, 350, 400, 365, 490, 400, 520, 510,
        395, 380, 404, 400, 500, 390, 610, 380, 390, 420, 440, 570, 600, 380, 410, 405, 480, 320, 420, 440,
        320, 280, 320, 400, 390, 460, 470, 490, 420, 480, 410, 420, 580, 410, 380, 480, 360, 650, 680, 720,
        580, 480, 520, 440, 420, 430, 380, 520, 410, 540, 400, 390, 460, 470, 490, 420, 480, 470, 490, 330,
        520, 480, 580, 590, 600, 310, 480, 500, 400, 508, 480, 460, 700, 705, 480, 410, 480};
    private string XValue { get; set; } = "85%";
    private Theme Theme { get; set; }
    public List<LineChartData> ChartPoints { get; set; }

    protected override void OnInitialized()
    {
        ChartPoints = this.GetData();
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    private List<LineChartData> GetData()
    {
        List<LineChartData> chartData = new List<LineChartData>();
        for (int i = 0; i < annualMean.Length; i++)
        {
            chartData.Add(new LineChartData
            {
                Period = new DateTime(1900, 1, 1).AddYears(i),
                RainfallInfo = annualMean[i]
            });
        }
        return chartData;
    }

    public class LineChartData
    {
        public DateTime Period { get; set; }
        public double RainfallInfo { get; set; }
    }
}